<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  th:with="title='提交订单',active='userinfo'"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="web/common/fragment::head(${title},null,'')"></head>
<style>
	.wrapper {
		padding: 0px 15px 50px 15px;
	}

	.wrapper .layui-form {
		max-width: 660px;
		padding-top: 10px;
	}

	.descGroup {
		background-color: #f6f6f6;
		padding: 15px !important;
		border-radius: 5px;
		color: #333;
	}

	.price1 {
		font-size: 23px;
		color: #FF5722;
	}

	.price2 {
		text-decoration: line-through;
		margin-left: 10px;
	}

	.priceDesc {
		color: #FF5722;
		margin-top: 10px;
	}

	.icPay {
		width: 35px;
		height: 35px;
		margin-top: -3px;
		margin-left: -5px;
	}

	.showHT.descGroup {
		margin-top: 10px;
		font-size: 13px;
		padding: 10px !important;
		color: #666;
	}
</style>
	<body>

		<div th:replace="web/layout/header::header(${active})"></div>
		<!--	main	-->
		<div class="fly-main wrapper">
			<div class="layui-card">
				<div class="layui-card-header">选择产品</div>
				<div class="layui-card-body">
					<div class="layui-form">
						<input name="goodsId" th:value="${goods.goodsId}" type="hidden"/>
						<div class="layui-form-item">
							<label class="layui-form-label">产品名称：</label>
							<div class="layui-input-block"><h1 style="line-height: 38px;" th:text="${goods.goodsName}">VIP</h1></div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">产品介绍：</label>
							<div class="layui-input-block">
								<div class="descGroup" th:text="${goods.goodsDesc}">VIP月租版，免费下载资源</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">产品价格：</label>
							<div class="layui-input-block" style="padding-top: 10px;">
								<span class="price1" th:text="'￥'+${goods.money}">9.9</span>
								<span class="price2" th:text="'￥'+${goods.primaryMoney}">￥69.9</span>
								<div class="descGroup priceDesc" th:text="${goods.remark}">限时优惠价，提供更优质的资源。</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">支付方式：</label>
							<div class="layui-input-block">
								<input name="payType" type="radio" value="alipay" title="&nbsp;&nbsp;<img class='icPay' src='/assets/images/ic_pay_ali.png'/>" checked="">
								<div class="layui-unselect layui-form-radio layui-form-radioed">
									<i class="layui-anim layui-icon"></i>
									<div>&nbsp;&nbsp;
										<img class="icPay" src="/assets/images/ic_pay_ali.png"/>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="checkbox" name="tyxy" lay-skin="primary" title="我同意<a href='/doc/copyright/' class='color-default' style='margin-top: -5px;' target='_blank'>《VIP购买协议》</a>" checked="">
								<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
									<span>我同意
										<a href="/doc/copyright/" class="color-default" style="margin-top: -4px;" target="_blank">《VIP购买协议》</a>
									</span>
									<i class="layui-icon layui-icon-ok"></i>
								</div>
							</div>
						</div>
						<div class="layui-form-item text-center" style="margin-bottom: 20px;margin-top: 25px;">
							<button class="layui-btn layui-btn-lg" lay-filter="buySubmit" lay-submit="">提交订单</button>
						</div>


					</div>
				</div>
			</div>
			<div style="margin-top: 30px;">
				<blockquote class="layui-elem-quote">
					您在购买中遇到任何问题都可以咨询在线客服。<a class="color-default" href="/doc/copyright/">  客服QQ </a>
				</blockquote>
			</div>

		</div>
		<!--	main end	-->
<!--	底部版权		-->
<div th:replace="web/layout/footer::footer"></div>
<!--	搜索		-->
<div th:replace="web/layout/common::pop-search"></div>
<!--	右边工具栏	-->
<div th:replace="web/layout/common::right-bar"></div>
<!--	引入JS	-->
<div th:replace="web/common/fragment::js"></div>
<script type="text/javascript" th:inline="javascript">
	/*<![CDATA[*/
	var loginUser = [[${session.sessionUser}]];
	/*]]>*/
    layui.use(['layer', 'form', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var util = layui.util;

        /*   // 返回顶部
        util.fixbar({
            bgcolor: '#4aca85',
            bar1: '&#xe63a;',
            click: function (type) {
                if (type == 'bar1') {
                    window.open('http://wpa.qq.com/msgrd?v=3&uin=904274014&site=qq&menu=yes');
                }
            }
        });*/

        // 表单提交
        form.on('submit(buySubmit)', function (data) {
        	if(B.isEmpty(loginUser)){
				layer.msg('请先登录系统', {icon: 7, anim: 6, time: 1500});
				return false;
			}
            if (!data.field.goodsId) {
                layer.msg('请选择产品', {icon: 2});
                return false;
            }
            if (!data.field.tyxy) {
                layer.msg('你必须同意产品服务协议方可获取授权', {icon: 2});
                return false;
            }
			/*layer.alert("请确定前往支付", {
				icon: 6,
				title: '提交订单',
				shade: .1,
				skin: 'layui-layer-admin',
				btn: '前往支付',
				yes: function (index, layero) {
					location.replace('/pay/toPay?goodsId=' + data.field.goodsId+"&payType="+data.field.payType);
				}
			});*/

			layer.load(1);

            $.post('/order/checkOrder', data.field, function (res) {
				if (res.success) {
					layer.msg('正在创建订单', {icon: 1});
					B.post({
						url:'/order/createOrder',
						data:{goodsId:data.field.goodsId,payType:data.field.payType},
						success:function (r) {
							layer.closeAll('loading');
							if (r.success) {
								layer.msg('订单创建成功', {icon: 1});
								location.replace('/order/pay?orderId=' + r.data);
							}else{
								layer.alert(res.msg, {
									icon: 7,
									title: '订单创建失败',
									btn: '知道了',
									shade: .1,
									skin: 'layui-layer-admin'
								});
							}
						}
					});
				}else{
					if (res.code == 3001) {
						layer.closeAll('loading');
						layer.alert(res.msg, {
							icon: 2,
							title: '操作失败',
							shade: .1,
							skin: 'layui-layer-admin',
							btn: '前往支付',
							yes: function (index, layero) {
								location.replace('/order/pay?orderId=' + res.data);
							}
						});
					} else if (res.code == 401) {
						layer.msg('请先登录系统', {icon: 7, anim: 6, time: 1500}, function () {
							return ;
						});
					} else {
						layer.closeAll('loading');
						layer.alert(res.msg, {
							icon: 7,
							title: '操作失败',
							btn: '知道了',
							shade: .1,
							skin: 'layui-layer-admin'
						});
					}

				}
            }, 'json');
        });

        // 监听radio选择
        form.on('radio(radioHT)', function (data) {
            if (data.value == 1) {
                $('.showHT').removeClass('layui-hide');
            } else {
                $('.showHT').addClass('layui-hide');
            }
        });

    });
</script>

	</body>
</html>
